<!--#layout("/common/layout.html",{"jsBase":"/js/meet/meetRecord/"}){ -->
<form class="layui-form layui-form-pane" id="serviceForm"  lay-filter="serviceForm">
    <input type="hidden" name="meetId" value="${meetId}"/>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" >时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="contactTime" id="contactTime" class="layui-input" placeholder="例如:2020-10-10 10:10"/>
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务内容</label>
                <div class="layui-input-block" style="width:512px">
                    <textarea name="content"  id="content" placeholder="请输入" class="layui-textarea" ></textarea>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
                <div class="layui-upload" style="width: 800px">
                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                    <input type="hidden" name="file" id="file"/>
                </div>

        </div>

    </div>
    <layui:submitButtons id="addButton" />
</form>
<!--#} -->
<script language="JavaScript">

    layui.extend({
        loading: '../../../plugins/layui_extends/loading/loading',
    }).define([ 'form', 'laydate', 'table','loading','meetRecordApi','upload'], function(exports) {
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var meetRecordApi = layui.meetRecordApi;
        $("#addButton").click(function(){
            // $("#addButton").hide();
            // $("#addButton-loading").show();
            // $("#addButton-loading").loading();
            form.on('submit(form)', function(){
                meetRecordApi.service($('#serviceForm'),function(){
                    parent.window.dataReload();
                    Common.info("保存成功");
                    Lib.closeFrame();
                });
            });
        });

        $("#addButton-cancel").click(function(){
            Lib.closeFrame();
        });

        laydate.render({
            elem: '#contactTime'
            ,type: 'datetime'
            ,range: false
            ,format: 'yyyy-MM-dd HH:mm'
        });
        var num = 0;
        //多文件列表示例
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: '${ctxPath}/upload/uploadImg.json' //改成您自己的上传接口
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件

                obj.preview(function(index, file, result){
                    num ++;
                    if(num<=3){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            num --;
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    }else{
                        num = 3;
                    }

                });
            }
            ,done: function(res, index, upload){
                console.log(res);
                if(res.state=="SUCCESS"){ //上传成功
                    console.log(res.url)
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    $("#file").val($("#file").val()+res.url+"@");
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

    });

</script>
